<template>
  <div
    class="mb-info"
    v-if="currentData"
    v-loading="loading"
  >
    <div class="app-portal-cnt-hd" v-if="currentData.name">
      <div class="app-portal-hd-icon">
        <JIcon :icon="DFT_ICONS.platform" v-if="currentData.id === -100" />
        <JIcon :icon="DFT_ICONS.global" v-else-if="currentData.id === -1" />
        <JIcon :icon="DFT_ICONS.app" v-else-if="isApp(currentData)" />
        <template v-else-if="isTask(currentData)">
          <JIcon
            :icon="DFT_ICONS.cloud"
            v-if="currentData.func_store === 1"
            v-tippy
            content="云函数实现"
          />
          <JIcon
            :icon="DFT_ICONS.codepen"
            v-else-if="currentData.func_store === 2"
            v-tippy
            content="专属函数实现"
          />
          <JIcon
            :icon="DFT_ICONS.fileCloud"
            v-else-if="currentData.func_store === 3"
            v-tippy
            content="任务文件"
          />
        </template>
      </div>
      <div class="app-portal-title" v-html="currentData.name"></div>
      <div
        class="app-portal-mark"
        v-if="currentData.task_code"
        v-copy="currentData.task_code"
        v-tippy="{ arrow: true, placement: 'right' }"
        content="点击复制"
      >{{ currentData.task_code }}</div>
      <div class="app-portal-mark" v-if="currentData.task_type" style="display: flex;align-items: center;">
        <JIcon
          :icon="DFT_ICONS.task"
          v-if="currentData.task_type === 1"
          v-tippy="{ arrow: true }"
          content="普通任务" />
        <template v-else-if="currentData.task_type === 2">
          <JIcon :icon="DFT_ICONS.time" v-tippy="{ arrow: true }" content="定时任务"></JIcon>
          <span style="margin-left: 2px;font-weight: bold;background: #EEE;padding: 2px 5px;">[ {{ currentData.task_cron }} ]</span>
        </template>
      </div>
      <div class="app-portal-mark" v-if="currentData.start_time">{{ currentData.start_time }} ~ {{ currentData.end_time }}</div>
      <div class="app-portal-tools"></div>
      <el-button
        v-if="currentData && currentData.task_id"
        class="app-group-add-btn"
        type="text"
        size="small"
        @click="handleClearCache">
        <template #icon>
          <JIcon :icon="DFT_ICONS.refresh" />
        </template>刷新缓存</el-button>
    </div>
    <div class="app-portal-cnt-bd" ref="datasContainer">
      <div
        v-if="!isTask(currentData)"
        class="code-file-view-tip"
      >
        {{ currentData.name }}
      </div>
      <div v-else-if="currentData.func_store === 3" class="code-file-view-tip">
        <span class="mb-3">{{ currentData.name }}</span>
        <p>脚本地址：{{ getTaskStorePath(currentData) }}</p>
      </div>
      <LownodeFunc
        v-else-if="currentData.func_store === 1"
        v-model="currentData.func"
        key="cloud"
        :is-view="true"
      />
      <LownodeFunc
        v-else-if="currentData.func_store === 2"
        v-model="currentData.private_func"
        key="private"
        :is-view="true"
      />
    </div>
    <ResizeObserver @notify="handleResize" />
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import _ from 'lodash';
import { ResizeObserver } from 'vue3-resize'
import {isApp, isTask, hasTaskCreatePermission, hasTaskEdit, isPlatform, isGlobal, getTaskStorePath} from '../func/common.js';
import {DFT_ICONS} from "@jzl/icons";
import {api} from "@jzl/api";
import { $jui } from '@jzl/utils'

const props = defineProps({
  currentData: Object
});

const loading = ref(false);
const datasTableHeight = ref(500);
const appId = ref(null);
const type = ref(4);
const form = ref(null);
const formFuncWinName = ref('');
const formFuncWinShow = ref(false);
const formFuncScriptWinShow = ref(false);

const init = async () => {
  handleResize();
};

const handleResize = () => {
  nextTick(() => {
    if (!datasContainer.value) return;

    let rect = datasContainer.value.getBoundingClientRect();
    let height = _.get(rect, 'height');
    if (height > 0) {
      datasTableHeight.value = height;
    }
  });
};

const handleClearCache = async () => {
  let taskId = _.get(props.currentData, "task_id");

  if (!taskId || taskId <= 0) return;

  let ret = await api.task.clearCache(taskId);

  if (ret) {
    $jui.success('操作成功！');
  }
};

onMounted(() => {
  init();
});

watch(() => props.currentData.id, () => {
  handleResize();
});

const datasContainer = ref(null);

</script>
